<template>
  <div class="dialog" v-if="formVisible">
    <div class="dialog_opacity" @click="hide"></div>
    <div class="dialog_box">
      <p class="title">用户账户详情</p>
      <div class="balance_box">
        <el-form :ref="formName" :model="formFieldsData" label-width='90px' :label-position="labelPosition" v-if="details">
          <el-form-item label="用户：">
            <p>{{details.user_info.username}}/{{details.user_info.mobile}}</p>
          </el-form-item>
          <el-form-item label="当前余额：">
            <p>￥{{details.balance}}</p>
          </el-form-item>
          <el-form-item label="可提现：">
            <p>￥{{details.balance}}</p>
          </el-form-item>
          <el-form-item label="提现中：">
            <span>￥{{details.withdrawal_in}}</span>
          </el-form-item>
          <el-form-item label="冻结中：">
            <span>￥{{details.frozen_balance}}</span>
            <el-link :underline="false" class="more" @click="isShow=!isShow">
              展开冻结记录<i class="el-icon-view" :class="isShow?'el-icon-caret-bottom':'el-icon-caret-top'"></i> 
            </el-link>
          </el-form-item>
        </el-form>
        <el-table
          v-if="isShow"
          :data="details.frozen_log"
          style="width: 100%;margin: 20px 0;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="操作类型"  align='center'>
            <template slot-scope="item">
              <p>{{getActionType(item.row)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="冻结金额" prop='money' align='center'/>
          <el-table-column label="操作时间" prop='create_time' align='center'/>
          <el-table-column label="备注" prop='remake' align='center'/>
        </el-table>
        <p>用户流水：</p>
        <el-table
          :data="details.records_log"
          style="width: 100%;margin: 20px 0;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="操作类型"  align='center'>
            <template slot-scope="item">
              <p>{{getFromType(item.row)}}</p>
            </template>
          </el-table-column>
          <el-table-column label="金额" prop='count_number' align='center'/>
          <el-table-column label="状态" align='center'>
            <template slot-scope="item">
              <p>{{item.row.sign==0?'出账':'入账'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作时间" prop='create_time' align='center'/>
        </el-table>
      </div>
      <div class="dialog-footer">
        <el-button @click="hide">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      id:'',
      list:[
        {id:1,full_name:'张三',mobile_code:18735365265,value_list:[],post:'司机',source:'',time:'2020-11-17',tuiguang:'aa',status:'1'}
      ],
      details:'',
      queryParam: {
        name: '',
        tel:'',
        type:'',
        income:'',
        time:'',
        starttime:'',
        endtime:'',
        page:1,
        pagesize:10,
        status:0
      },
      actions:[
        {label:'冻结金额',id:1},
        {label:'提现',id:2},
        {label:'简历',id:3},
        {label:'企业',id:4},
        {label:'岗位',id:5}
      ],
      froms:[
        {label:'注册账号',id:1},
        {label:'发布简历',id:2},
        {label:'浏览岗位',id:3},
        {label:'提现',id:100},
        {label:'拒绝提现返回用户余额',id:101}
      ],
      formVisible:false,
      isShow:false // 是否展示冻结记录
    }
  },
  methods: {
    // 获取列表
    getList() {
      console.log(this.queryParam)
    },
    show(id) {
      this.id = id
      this.$http.get('/user/admin/Balance/'+id).then(response => {
        this.details = response.data.data || response.data
      })
      this.formVisible = true
    },
    // 获取冻结记录的操作类型
    getActionType(item) {
      if (item.action_type == 1) {
        if (item.status==1) {
          return '冻结金额'
        } else {
          return '取消冻结金额'
        }
      } else {
        let idx = this.actions.findIndex(res=>{
          return res.id == item.action_type
        })
        return idx>-1?this.actions[idx].label:''
      }
    },
    // 获取收支流水操作类型
    getFromType(item) {
      let idx = this.froms.findIndex(res=>{
        return res.id == item.from_type
      })
      return idx>-1?this.froms[idx].label:''
    },
    hide() {
      this.formVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog{
    position: fixed;
    left: 0;
    top:70px;
    bottom:0;
    right:0;
    z-index: 9;
  }
  .dialog_opacity{
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    right:0;
    background: rgba($color: #000000, $alpha: .5);
  }
  .dialog_box{
    position: absolute;
    right: 0;
    top:0;
    bottom:0;
    width: 700px;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .title{
    line-height: 80px;
    border-bottom:1px solid #eee;
    padding-left: 20px;
    font-size: 18px;
  }
  .balance_box{
    padding: 20px;
    flex:1;
    min-height: 0;
  }
  .info{
    line-height: 30px;
    margin-bottom:10px;
  }
  .dialog-footer{
    padding: 20px;
    text-align: right;
  }
  .more{
    margin-left: 20px;
  }
</style>